import React, { useCallback, useMemo, useState } from 'react'
import { Image, View } from '@tarojs/components'
import Images from '@ASSET/Images'
import { getNavBar, getPlatform } from '@UTILS/common'
import Taro from '@tarojs/taro'
import style from './HomeStepPanel.module.scss'

interface Props {
  onCloseFun: () => void
}

const HomeStepPanel: React.FC<Props> = ({ onCloseFun }) => {
  const heightStyle = useMemo(() => getNavBar(), [])
  const [show, setShow] = useState(false)
  const containerStyle = useMemo(() => {
    const cusStyle = {
      top: heightStyle.navBarHeight
    }
    if (!getPlatform().isWX) {
      return {
        right: 20,
        ...cusStyle
      }
    }
    const { windowWidth } = Taro.getSystemInfoSync()
    const { right = 0 } = Taro.getMenuButtonBoundingClientRect() || {}
    return {
      right: windowWidth - right + 13,
      ...cusStyle
    }
  }, [heightStyle.navBarHeight])

  const onClick = useCallback(e => {
    if (
      !(e.mpEvent.target.id
        && e.mpEvent.target.id === 'panel')
    ) {
      onCloseFun && onCloseFun()
    }
  }, [onCloseFun])
  const onLoad = useCallback(() => {
    setShow(true)
  }, [setShow])
  return (
    <View className={`${style.container}`} onClick={onClick}>
      <View className={style.stepPanel} style={containerStyle}>
        <Image mode="widthFix" src={Images.home.homeSteps} onLoad={onLoad} className={style.panelImage} id="panel" />
        {show ? (
          <View className={style.stepPanelClose}>
            <Image
              src={Images.home.homePanelcClose}
              className={style.stepPanelClose}
            />
          </View>
        ) : null}
      </View>
    </View>
  )
}

export default HomeStepPanel
